<template>
    <div class="label-item">
        <p class="label-title" flex="cross:center" 
            style="display:flex;justify-content:space-between; align-items:center;"
        >{{name}}
            <img src="../../assets/images/labels/hot.png" class="hot" v-for="index in hot" :key="index" />
            </p>
        <p v-if="more" @click="moreCallback" class="more">更多 <span  class="iconfont icon-htmal5icon45"></span></p>
    </div>
</template>

<script>
    export default {
        props:{
            name:String,
            isHot:Boolean,
            more:{
                default:()=>{
                    return false
                },
            },
            hot:Number,
            moreCallback:
            {
            default:()=>{
                return
            }
            },
        }
    }
</script>

<style lang="scss" scoped>
.label-item {
  display: flex;
margin-top:30px;
  justify-content: space-between;
  align-items: center;

}
.label-title {
  font-size: 24px;
    height:90px;
    color: #1a1a1a;
    padding:0 20px;
   
    background-image: url('../../../src/assets/images/bg/label.png');
    background-size: 100% 100%;
    // background: -webkit-linear-gradient(bottom, rgba(255, 101, 8,0.1) 0%, #fff6f1 50%, rgba(255, 255, 255, 1) 100%);
    // transform:skew(-8deg) translate(10px);
        font-weight: 600;
  
}

.label-title {
    display: flex;
    align-items: center;
}

.hot {
  
  width: 30px;
  height: 30px
}
.more{
    cursor: pointer;
    &:hover {
        color: --color-primary;
    }
}
</style>